<template>
	<div class="config-page">
		<div class="card-main-title mt5 mb10">数据统计（拖动组件排序）</div>
		<div class="top-card mb10">
			<draggable class="el-row" style="margin-left: -5px; margin-right: -5px" v-model="topList" item-key="id" v-bind="dragOptions">
				<template #item="{ element: item }">
					<el-col :span="Number(item.simpleName)" class="mb10" style="padding-right: 5px; padding-left: 5px; cursor: move">
						<el-image style="width: 100%" :src="previewUrl + item.imgUrl" fit="contain" />
					</el-col>
				</template>
			</draggable>
		</div>
		<div class="card-main-title mb10">图表统计（拖动组件排序）</div>
		<div class="bottom-card">
			<draggable class="el-row" style="margin-left: -5px; margin-right: -5px" v-model="chartList" item-key="id" v-bind="dragOptions">
				<template #item="{ element: item }">
					<el-col :span="Number(item.simpleName)" class="mb10" style="padding-right: 5px; padding-left: 5px; cursor: move">
						<div style="width: 100%; height: 400px; background-color: #fff">
							<el-image style="width: 100%; height: 100%" :src="previewUrl + item.imgUrl" fit="contain" />
						</div>
					</el-col>
				</template>
			</draggable>
		</div>
		<div class="config-btn">
			<el-tooltip effect="dark" content="保存排序" placement="left-start">
				<el-button type="warning" @click="handleSave" circle>
					<el-icon><ele-Finished /></el-icon>
				</el-button>
			</el-tooltip>
			<el-tooltip effect="dark" content="配置组件" placement="left-start">
				<el-button type="danger" @click="handleConfig" circle>
					<el-icon><ele-Setting /></el-icon>
				</el-button>
			</el-tooltip>
		</div>
		<EditDivideItemModal ref="editDivideItemModalRef" :topIds="topIds" :chartIds="chartIds" @peak-modal-ok="getDataList" />
	</div>
</template>
<script setup>
import global from '@/utils/global'
import draggable from 'vuedraggable'
import EditDivideItemModal from './leafPages/EditDivideItemModal.vue'

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-11-07 15:42:35
 */
const topIds = ref([])
const chartIds = ref([])
const state = reactive({
	topList: [],
	chartList: [],
	editDivideItemModalRef: null,
	previewUrl: import.meta.env.VITE_IMAGE_PREVIEW,
})
const { topList, chartList, editDivideItemModalRef, previewUrl } = toRefs(state)
const dragOptions = computed(() => {
	return {
		animation: 600,
		group: 'description',
		disabled: false,
		ghostClass: 'ghost',
	}
})

onMounted(() => {
	getDataList()
})
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-11-07 15:42:43
 */

const getDataList = () => {
	global.$fetchGetData(`/meta-system/web/v1/chartBoard/listByAssignType/1`, {}).then(data => {
		if (data.code == 200) {
			const topListAry = []
			const chartListAry = []
			data.data.forEach(item => {
				if (item.boardType == '1') {
					topListAry.push(item)
				} else if (item.boardType == '2') {
					chartListAry.push(item)
				}
			})
			state.chartList = chartListAry
			state.topList = topListAry
			topIds.value = topListAry.map(item => item.id)
			chartIds.value = chartListAry.map(item => item.id)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const handleConfig = () => {
	state.editDivideItemModalRef.handleShowModal()
}
const handleSave = () => {
	const resTopList = state.topList.map(item => item.id)
	const resChartList = state.chartList.map(item => item.id)
	global
		.$fetchPostData(`/meta-system/web/v1/chartBoard/updateSorted`, {
			ids: [...resTopList, ...resChartList],
		})
		.then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.msg, 'success')
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
}
</script>
<style lang="scss" scoped>
.config-page {
	position: relative;
	padding-bottom: 50px;
}
.top-card {
	width: 100%;
	height: 270px;
	border: 1px solid #e4e7ed;
	padding: 5px;
}
.bottom-card {
	width: 100%;
	height: 68vh;
	border: 1px solid #e4e7ed;
	padding: 5px;
}
.config-btn {
	position: absolute;
	right: 16px;
	top: 10px;
}
</style>
